<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="60%"
    top="5vh"
    destroy-on-close
    @close="handleClose"
  >
    <div class="image-container">
      <img
        v-if="imgUrl"
        :src="imgUrl"
        class="image-preview"
        alt="图片预览"
      />
      <div v-else class="image-loading">
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item variant="image" style="height: 400px" />
          </template>
        </el-skeleton>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const visible = ref(false)
const imgUrl = ref('')
const title = ref('图片预览')

const open = (url: string, imgTitle = '图片预览') => {
  imgUrl.value = url
  title.value = imgTitle
  visible.value = true
}

const handleClose = () => {
  visible.value = false
  imgUrl.value = ''
}

defineExpose({
  open
})
</script>

<style scoped>
.image-container {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
